@import './_variables.scss';
@import './_mixins.scss';

.enhancedCheck-inline {
  display: inline;
  div {
    display: inline;
  }
}


.enhancedCheck {
  div {
    margin-top: 5px;
    margin-bottom: 5px;
  }
  label {
    @include labelBorderRadius($radiusDefault 0 0 $radiusDefault);
  }
  input[type="radio"], input[type="checkbox"] {
    display: none;
    & + label {
      @include colorLabel(color(default), color(ddefault));
      border: 1px solid color(default);
      color: inherit;
      position: relative;
      padding: $paddingVertical $paddingHorizontal $paddingVertical ($iconWidth + $paddingHorizontal);
      cursor: pointer;
      display: inline-block;
      &:before {
        position: absolute;
        display: block;
        top: 0;
        bottom: 0;
        left: 0;
        content: '';
        width: $iconWidth;
        background: color(ddefault);
        text-align: center;
        line-height: 200%;
      }
    }
    &:disabled + label {
      cursor: not-allowed;
    }

    &:not(:checked) {
      & + label {
        &:hover {
          color: color(hdefault);
          &:before {
            color: color(default);
          }
        }
      }

    }

  }
  input[type="checkbox"] {
    &:not(:checked) + label:hover:before {
      content: $iconCheckbox;
    }
    &:checked + label:before {
      content: $iconCheckbox;
    }
  }
  input[type="radio"] {
    &:not(:checked) + label:hover:before {
      content: $iconRadio;
    }
    &:checked + label:before {
      content: $iconRadio;
    }
  }
  &.enhancedCheck-combine {
    input[type="checkbox"] {
      &:not(:checked) + label:hover:before {
        content: $iconCombine;
      }
      &:checked + label:before {
        content: $iconCombine;
      }
    }
  }

  &.enhancedCheck-primary {
    input[type="radio"], input[type="checkbox"] {
      @include colorLabel(color(primary), color(dprimary));
    }
  }
  &.enhancedCheck-success {
    input[type="radio"], input[type="checkbox"] {
      @include colorLabel(color(success), color(dsuccess));
    }
  }
  &.enhancedCheck-warning {
    input[type="radio"], input[type="checkbox"] {
      @include colorLabel(color(warning), color(dwarning));
    }
  }
  &.enhancedCheck-danger {
    input[type="radio"], input[type="checkbox"] {
      @include colorLabel(color(danger), color(ddanger));
    }
  }

  &.enhancedCheck-animate {
    label {
      transition: color $transitionTime ease;
      -webkit-transition: color $transitionTime ease;
      &:before {
        transition: background-color $transitionTime ease;
        -webkit-transition: background-color $transitionTime ease;
      }
    }
  }

  &.enhancedCheck-rounded {
    label {
      @include labelBorderRadius($radiusRound);
    }
  }

}


.enhancedToggle {
  position: relative;
  overflow: hidden;
  vertical-align: middle;
  user-select: none;
  cursor: pointer;
  height: 2em;
  @include colorToggle(color(default), color(ddefault));
  border: 1px solid color(border);
  border-radius: $radiusDefault;
  margin-top: 5px;
  margin-bottom: 5px;

  &.enhancedCheck-rounded {
    border-radius: $radiusRound;
  }

  label {
    position: absolute;
    top: 0;
    bottom: 0;
    left: -100%;
    width: 200%;
    transition: left $transitionTimeToggle;
    -webkit-transition: left $transitionTimeToggle;
  }

  &.enhancedCheck-checked label {
    left: 0;
  }

  &.enhancedCheck-disabled label {
    cursor: not-allowed;
  }

  &.enhancedCheck-primary {
    @include colorToggle(color(primary), color(dprimary));
  }
  &.enhancedCheck-success {
    @include colorToggle(color(success), color(dsuccess));
  }
  &.enhancedCheck-warning {
    @include colorToggle(color(warning), color(dwarning));
  }
  &.enhancedCheck-danger {
    @include colorToggle(color(danger), color(ddanger));
  }

  .enhancedToggle-label {
    padding: $paddingVertical $paddingHorizontal;
    transition: background $transitionTimeToggle;
    -webkit-transition: background $transitionTimeToggle;

    position: absolute;
    top: 0;
    bottom: 0;
    border-radius: $radiusDefault;
    color: inherit;
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    text-align: center;

    &.labelOn {
      left: 0;
      padding-right: $paddingHorizontal + 30px;
    }
    &.labelOff {
      right: 0;
      padding-left: $paddingHorizontal + 30px;
    }
  }

  .enhancedToggle-switch {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50px;
    border: 1px solid color(border);
    border-radius: $radiusDefault;
    width: 20px;
    z-index: 20;
    background: white;
  }

  &.enhancedCheck-rounded {
    .enhancedToggle-label,.enhancedToggle-switch {
      border-radius: $radiusRound;
    }
  }



}

